<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
</head>
<body>
<div layout:fragment="content">
    <div class="g-dg-search-banner">
        <i-form ref="mySearchForm" :model="searchForm" :label-width="80">
            <Row>
                <i-col span="6">
                    <Form-item label="用户名">
                        <i-input v-model="searchForm.userName" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
                <i-col span="6">
                    <Form-item label="登录账号">
                        <i-input v-model="searchForm.userAccount" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
                <i-col span="6">
                    <Form-item label="手机">
                        <i-input v-model="searchForm.userMobile" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
                <i-col span="6">

                </i-col>
            </Row>
        </i-form>
    </div>
    <div class="g-dg-toolbar">
        <i-button type="info" icon="search" @click="reload">查询</i-button>
        <i-button type="primary" @click="add">新增</i-button>
        <i-button type="warning" @click="remove">删除</i-button>
        <!--<i-button type="info" icon="primary" @click="openMSetRolesModel">批量分配角色</i-button>-->
    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             @on-selection-change="onSelRows" @on-current-change="onCurrentChange" @on-row-dblclick="edit"
             stripe></i-table>

    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="page" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </div>
    </div>
</div>

<script layout:fragment="script">
    const m_apis = {
        getList(p_body, p_page, p_pageSize){
            return PB.apiRoute('/api/sys/user/getList?pageNo=' + p_page + '&pageSize=' + p_pageSize, 'GET', p_body)
        },
        remove(p_ids) {
            return PB.apiRoute('/api/sys/user/remove?ids=' + p_ids, 'POST');
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis:m_apis,
                title: '本地用户管理',
                page: 1,
                pageSize: 10,
                total: 0,
                searchForm: {},
                dtData: [],
                dtCols: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名称',
                        key: 'userName'
                    },
                    {
                        title: '账号',
                        key: 'userAccount'
                    },
                    {
                        title: '手机',
                        key: 'userMobile'
                    },
                    {
                        title: '邮箱',
                        key: 'userEMail'
                    },
                    {
                        title: '操作',
                        //fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click:() => {
                                            this.setRole(params.row)
                                        }
                                    },
                                }, '分配角色')
                            ]);
                        }
                    }
                ],
                currentRow:null,
                selRows: null
            }
        },
        created(){
            this.loadData();
        },
        computed: {
            getTableHeight(){
                return (window.innerHeight - 170);
            }
        },
        methods: {
            loadData () {
                let that = this;
                PB.ajax(this.apis.getList(this.searchForm, this.page, this.pageSize), function (d) {
                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            reload(){
                this.page = 1;
                this.loadData();
            },
            onSelRows(selection) {
                this.selRows = selection;
            },
            onCurrentChange(currentRow, oldCurrentRow){
                this.currentRow = currentRow;
            },
            changePage (e) {
                this.page = e;
                this.loadData();
            },
            changePageSize(e){
                this.page = 1;
                this.pageSize = e;
                this.loadData();
            },
            add(){
                PB.showFormPage('sys/user/detail?actionType=add', this.title);
            },
            edit(row){
                PB.showFormPage('sys/user/detail?actionType=edit&id=' + row.id, this.title);
            },
            remove(){
                if (this.selRows) {
                    let that = this;
                    PB.confirm('确定删除吗？', function () {
                        PB.ajax(that.apis.remove(that.selRows.map(q => q.id)), function (d) {
                            that.reload();
                        });
                    });
                }

            },
            setRole(row){
                let that = this;
                setTimeout(function () {
                    PB.showFormPage('sys/user/setRole?id=' + row.id, '分配角色');
                }, 1);
            },
            openMSetRolesModel(){
                PB.showFormPage('sys/user/setMRole', '批量分配角色');
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
</script>
</body>
</html>
